<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 顶部 -->
    <div class="top">
       <div class="dh-left">
           <span>小米商城</span>
           <span>MIUI</span>
           <span>loT</span>
           <span>云服务</span>
           <span>天星科技</span>
           <span>有品</span>
           <span>小爱开放平台</span>
           <span>企业团购</span>
           <span>资质证照</span>
           <span>协议规则</span>
           <span>下载App</span>
           <span>智能生活</span>
       </div>
       <div class="dh-right">
           <span>登录</span>
           <span>注册</span>
           <span>消息通知</span>
       </div>
       <div class="cart">
           购物车
       </div>
    </div>
    <!-- 导航 -->
    <div class="cate">
       <div class="img">
           <img src="./1.png" alt="">
       </div>
       <div class="dh">
           <span>Xiaomi手机</span>
           <span>Redmi手机</span>
           <span>电视</span>
           <span>笔记本</span>
           <span>平板</span>
           <span>家电</span>
           <span>路由器</span>
           <span>服务中心</span>
           <span>社区</span>
       </div>
       <div class="search">
           <input type="text" placeholder="耳机" name="" id="">
           <div class="img">
            <img src="./2.png" alt="">
           </div>
       </div>
    </div>
    <!-- 轮播 -->
    <div class="banner">
        <div class="wrap">
            <ul class="list">
                <li class="item active">
                    <img src="./bg1.jpg" alt="">
                </li>
                <li class="item">
                    <img src="./bg2.jpg" alt="">
                </li>
                <li class="item">
                    <img src="./bg3.jpg" alt="">
                </li>
                <li class="item">
                    <img src="./bg4.jpg" alt="">
                </li>
            </ul>
            <ul class="pointList">
                <li class="point active" data-index = 0></li>
                <li class="point" data-index = 1></li>
                <li class="point" data-index = 2></li>
                <li class="point" data-index = 3></li>
                
                <div class="box234">
                    <div class="li">
                        <ul>
                            <li>手机 <span>></span> </li>
                            <li>电视 <span>></span></li>
                            <li>笔记本 平板 <span>></span></li>
                            <li>出行 穿戴 <span>></span></li>
                            <li>耳机 音响 <span>></span></li>
                            <li>家电 <span>></span></li>
                            <li>智能 路由器 <span>></span></li>
                            <li>电源 配件 <span>></span></li>
                            <li>健康 儿童 <span>></span></li>
                            <li>生活 箱包 <span>></span></li>
                        </ul>
                    </div>
                   </div>
            </ul>
            <button class="btn" id="leftBtn"> < </button> 
            <button class="btn" id="rightBtn"> > </button>
         
        </div>
    
    </div>
    <!-- 导购 -->
    <div class="banner2">
       <div class="left"></div>
       <div class="center"></div>
       <div class="right"></div>
       <div class="right1"></div>
    </div>
    <!-- 闪购 -->
    <div class="banner3">
      <div class="text">小米闪购</div>
      <div class="box">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
        <div class="four"></div>
        <div class="five"></div>
      </div>
    </div>
    <!-- 分 -->
    <div class="banner4">
        <img src="./9.png" alt="">
    </div>
   <!-- 分割 -->
   <div class="fen">
        <!-- 手机 -->
    <div class="banner5">
        <div class="text">手机 <span>查看全部</span> </div>
        <div class="all">
            <div class="left">
                <img src="./10.png" alt="">
            </div>
            <div class="right">
                <div class="box1">
                    <div class="img">
                        <img src="./sj-2.png" alt="">
                    </div>
                    <div class="text">
                        <p class="title" >小米9 6GB + 128GB</p>
                        <p class="desc" >晓龙855,索尼4800万超广角微距三摄</p>
                        <p class="price">2599元</p>
                    </div>
                </div>
                <div class="box1">
                    <div class="img">
                        <img src="./sj-4.png" alt="">
                    </div>
                    <div class="text">
                        <p class="title" >Redmin Note 7 Pro </p>
                        <p class="desc" >6GB + 128GB大存储,索尼4800万拍照</p>
                        <p class="price">1599元</p>
                    </div>
                </div>
                <div class="box1">
                    <div class="img">
                        <img src="./sj-3.png" alt="">
                    </div>
                    <div class="text">
                        <p class="title" >小米MIX 3 6GB + 128GB</p>
                        <p class="desc" >磁动力滑盖全面屏/四曲面陶瓷机身</p>
                        <p class="price">2299元</p>
                    </div>
                </div>
                <div class="box1">
                    <div class="img">
                        <img src="./sj-5.png" alt="">
                    </div>
                    <div class="text">
                        <p class="title" >小米Play 4GB + 64GB</p>
                        <p class="desc" >八核高性能处理器,后置1200万AI双摄</p>
                        <p class="price">749元</p>
                    </div>
                </div>
                <div class="box1">
                    <div class="img">
                        <img src="./sj-6.png" alt="">
                    </div>
                    <div class="text">
                        <p class="title" >小米8 屏幕指纹版 6GB + 128GB</p>
                        <p class="desc" >全球首款压感屏幕指纹 小龙845处理器</p>
                        <p class="price">1799元</p>
                    </div>
                </div>
                <div class="box1">
                    <div class="img">
                        <img src="./sj-7.png" alt="">
                    </div>
                    <div class="text">
                        <p class="title" >小米8青春版 6GB + 64GB</p>
                        <p class="desc" >潮流渐变色,2400万自拍旗舰</p>
                        <p class="price">1499元</p>
                    </div>
                </div>
                <div class="box1">
                    <div class="img">
                        <img src="./sj-8.png" alt="">
                    </div>
                    <div class="text">
                        <p class="title" >Redmi Note 7 6GB + 64GB</p>
                        <p class="desc" >4800万拍照, 4000Ah大电量</p>
                        <p class="price">1099元</p>
                    </div>
                </div>
                <div class="box1">
                    <div class="img">
                        <img src="./sj-9.png" alt="">
                    </div>
                    <div class="text">
                        <p class="title" >Redmi K20 Pro 6GB + 128GB</p>
                        <p class="desc" >骁龙855旗舰处理器,索尼4800万超广角</p>
                        <p class="price">2299元</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
   </div>
   <!-- 分 -->
  <div class="box123">
    <div class="banner8">
        <img src="./11.png" alt="">
    </div>
  </div>
<div class="buttom">
 <div class="banner6">
   <div class="dh1">
       <span>预约维修服务</span>
       <span>七天无理由退货</span>
       <span>十五天免费换货</span>
       <span>满99元包邮</span>
       <span>520余家售后网店</span>
   </div>
   <hr>
   <div class="table">
       <div class="le">
           <table>
               <tr>
                   <th>帮助中心</th>
                   <th>服务支持</th>
                   <th>线下门店</th>
                   <th>关于小米</th>
                   <th>关于我们</th>
                   <th>特色服务</th>
               </tr>
               <tr>
                   <td>账户管理</td>
                   <td>售后政策</td>
                   <td>小米之家</td>
                   <td>了解小米</td>
                   <td>新浪微博</td>
                   <td>F码通道</td>
               </tr>
               <tr>
                   <td>购物指南</td>
                   <td>自主服务</td>
                   <td>服务网点</td>
                   <td>加入小米</td>
                   <td>官方微信</td>
                   <td>礼物码</td>
               </tr>
               <tr>
                   <td>订单操作</td>
                   <td>相关下载</td>
                   <td>授权体验店</td>
                   <td>投资者关系</td>
                   <td>联系我们</td>
                   <td>防伪 查询</td>
               </tr>
               <tr>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td>廉洁举报</td>
                   <td></td>
                   <td></td>
               </tr>
           </table>
       </div>
       <div class="ri">
           <img src="./12.png" alt="">
       </div>
</div>
<div class="wz">
    小米商城|MIUI|米家|米聊|多看|游戏|路由器|米粉卡|政企服务|小米天猫店|小米集团隐私政策|小米商城隐私政策|小米商城用户协议|问题反馈

    © mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2020]0276-042号
    （京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京) -非经营性-2014-0090 营业执照 医疗器械公告
    增值电信业务许可证  网络食品经营备案 京食药网食备202010048   食品经营许可证
    违法和不良信息举报电话：171-5104-4404 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
    
    TRUSTe Privacy Certification 诚信网站 可信网站 网上交易保障中心 诚信经营 放心消费 
 </div>
 <div class="di">
     <p>让全球每个人都能享受科技带来的美好生活</p>
 </div>
 </div>
</div>
</body>
</html>
<script>
      var items = document.querySelectorAll(".item");//图片节点
        var points = document.querySelectorAll(".point")//点
        var left = document.getElementById("leftBtn");
        var right = document.getElementById("rightBtn");
        var all = document.querySelector(".wrap")
        var index = 0;
        var time = 0;//定时器跳转参数初始化
        
 
        //封装一个清除active方法
        var clearActive = function () {
            for (i = 0; i < items.length; i++) {
                items[i].className = 'item';
            }
            for (j = 0; j < points.length; j++) {
                points[j].className = 'point';
            }
        }
 
        //改变active方法
        var goIndex = function () {
            clearActive();
            items[index].className = 'item active';
            points[index].className = 'point active'
        }
        //左按钮事件
        var goLeft = function () {
            if (index == 0) {
                index = 3;
            } else {
                index--;
            }
            goIndex();
        }
 
        //右按钮事件
        var goRight = function () {
            if (index < 3) {
                index++;
            } else {
                index = 0;
            }
            goIndex();
        }
        
 
        //绑定点击事件监听
        left.addEventListener('click', function () {
            goLeft();
            time = 0;//计时器跳转清零
        })
 
        right.addEventListener('click', function () {
            goRight();
            time = 0;//计时器跳转清零
        })
 
        for(i = 0;i < points.length;i++){
            points[i].addEventListener('click',function(){
                var pointIndex = this.getAttribute('data-index')
                index = pointIndex;
                goIndex();
                time = 0;//计时器跳转清零
            })
        }
        //计时器轮播效果
        var timer;
        function play(){
         timer = setInterval(() => {
            time ++;
            if(time == 20 ){
                goRight();
                time = 0;
            }    
        },100)
    }
        play();
        //移入清除计时器
        all.onmousemove = function(){
            clearInterval(timer)
        }
       //移出启动计时器
        all.onmouseleave = function(){
            play();
        }

</script>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .top{
        width: 100%;
        height: 45px;
        background-color: rgb(51,51,51);
    }
    .dh-left{
        width: 850px;
        height: 45px;
        margin-left:180px ;
        line-height: 45px;
        float: left;
    }
    .dh-left span{
        text-align: center;
        color: gainsboro;
        margin:0 8px;
    }
    .dh-left span:hover{
        color: white;
    }
    .dh-right{
        width: 165px;
        height: 45px;
        margin-left:260px;
        line-height: 45px;
        float: left;
    }
    .dh-right span{
        text-align: center;
        color: gainsboro;
        margin:0 8px;
    }
    .dh-right span:hover{
        color: white;
    }
    .cart{
        width: 150px;
        height: 45px;
        float: left;
        background-color: rgb(66, 66, 66);
        line-height: 45px;
        text-align: center;
        font-size: 15px;
        color:white;
    }
    .cart:hover{
        color:rgb(255, 103, 0);
        background-color: rgb(255, 255, 255);
    }
    .cate{
        width: 100%;
        height: 145px;
        background-color: rgb(255, 255, 255);
    }
    .cate .img{
        width: 75px;
        height: 75px;
        margin:40px 183px;
        float: left;
    }
    .cate .img img{
        width: 100%;
        height: 100%;
    }
    .dh{
        width: 775px;
        height: 145px;
        margin-left:1px;
        line-height: 145px;
        float: left;
    }
    .dh span{
        text-align: center;
        font-size: 18px;
        color: rgb(0, 0, 0);
        margin:0 8px;
    }
    .dh span:hover{
        color:rgb(255, 103, 0);
    }
    .search{
        width: 400px;
        height: 145px;
        float: left;
        position: relative;
    }
    .search input{
      width: 305px;
      height: 60px;
      font-size: 18px;
      padding-left: 5px;
      border-radius: 3px;
      border: 1px solid rgb(176, 176, 176);
      margin-top: 40px;
    }
    .search .img{
        position: absolute;
        top: 0px;
        right: -149px;
        width: 60px;
        height: 62px;
    }
    .banner{
        width: 1530px;
        height: 575px;
        margin: 0 80px;
   
        background-size: 100% 100%;
    }
    
    .banner2{
        width: 1530px;
        height: 238px;
        background-color: rgb(255, 255, 255);
        margin: 0 80px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .banner2 .left{
        width: 290px;
        height: 210px;
        background-image:url(./4.png);
        background-size: 100% 100% ;
        float: left;
    }
    .banner2 .center{
        width: 400px;
        height: 210px;
        background-image:url(./5.png);
        background-size: 100% 100% ;
        float: left;
    }
    .banner2 .right{
        width: 400px;
        height: 210px;
        background-image:url(./6.png);
        background-size: 100% 100% ;
        float: left;
    }
    .banner2 .right1{
        width: 400px;
        height: 210px;
        background-image:url(./7.png);
        background-size: 100% 100% ;
        float: left;
    }
    .banner3{
        width: 1530px;
        height:500px;
        /* background-color: bisque; */
        margin: 0 80px;
    }
    .banner3 .text{
        width: 100% ;
        height: 70px;
        font-size: 35px;
        font-weight: 100;
        font-family: 小篆;
    }
    .banner3 .box{
        display: flex;
        justify-content: space-around;
    }
    .banner3 .one{
        width: 290px;
        height: 420px;
        border: 1px solid rgb(229, 57, 53);
        background-image:url(./8.png) ;
    }
    .banner3 .two{
        width: 290px;
        height: 420px;
        border: 1px solid rgb(255, 172, 19);
    }
    .banner3 .three{
        width: 290px;
        height: 420px;
        border: 1px solid rgb(131, 196, 78);
    }
    .banner3 .four{
        width: 290px;
        height: 420px;
        border: 1px solid rgb(33, 150, 243);
    }
    .banner3 .five{
        width: 290px;
        height: 420px;
        border: 1px solid rgb(229, 57, 53);
    }
    .banner4{
        width: 1530px;
        height:150px;
        margin:40px 80px;
    }
    .banner4 img{
        width: 100%;
        height: 100%;
    }
    .fen{
        width: 100%;
        height: 860px;
        background-color: rgb(245, 245, 245);
    }
    .banner5{
        width: 1530px;
        height: 860px;
       
        margin: 0 80px;
    }
    .banner5 .text{
        width: 100% ;
        height: 70px;
        font-size: 35px;
        font-weight: 100;
        font-family: 小篆;
    }
    .banner5 .text span{
        display: inline-block;
        margin-left: 1300px;
        font-size: 18px;
    }
    .banner5 .all{
        width: 1530px;
        height: 790px;
        display: flex;
    }
    .banner5 .left{
     width: 300px;
     height: 765px;
     margin-right: 7px;
    }
    .left:hover{
        box-shadow: 10px 10px 5px #b4b4b4;
    }
    .banner5 .right{
        flex:1;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        
    }
    .right .box1{
        width: 295px;
        height: 370px; 
       
    }
    .right .box1:hover{
        box-shadow: 10px 10px 5px #b4b4b4;
    }
    .box1 .img{
    width: 100%;
    height: 60%; 
    }
    .img img{
        width: 100%;
        height: 100%;
    }
    .box1 .text{
        width: 100%;
        height: 40%;
        text-align: center;
        background-color: white;
        line-height: 100%;
    }
    .text .title{
        font-size: 14px;
        color: black;
    }
    .text .desc{
        font-size: 14px;
        color: gray;
    }
    .text .price{
        font-size: 15px;
        color: red;
    }
    .box123{
     width: 100%;
     height: 150px;
     background-color: rgb(245, 245, 245);
    }
    .banner8{
        width: 1530px;
        height:150px;
        margin:0px 80px;
        
    }
    .banner8 img{
        width: 100%;
        height: 100%;
    }
    .buttom{
        width: 100%;
        height: 680px;
        
    }
    .banner6{
        width: 1530px;
        height: 680px;
        margin: 0 80px;
        /* background-color: gainsboro; */
    }
    .banner6 .dh{
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        
    }
    .dh1 span{
        display: inline-block;
        width: 18%;
        height: 80%;
        font-size: 20px;
        /* margin-top:15px ; */
        line-height: 15px;
        text-align: center;
        padding-top: 60px;
        color: rgb(0, 0, 0);
        margin:0 8px;
    }
    .dh1 span:hover{
        color:rgb(255, 103, 0);
    }
    .table{
        width: 100%;
        height:250px;
        display: flex;
    }
    .table .le{
        width: 1220px;
        height: 250px;
    }
    .le table{
        width: 100%;
        height: 100%;
        
    }
    .le table th{
        font-size: 18px;
    }
    .le table td{
        text-align: center;
        font-size: 15px;

    }
    .ri{
        flex: 1;
    }
    .wz{
        width: 1050px;
        height: 300px;
        margin: 0 245px;
        font-size: 15px;
        text-align: center;
    }
    .di{
      width: 100%;
      height: 30px;
    }
    .di p {
        text-align: center;
        font-size: 25px;
        font-family: 楷体;
        color: rgb(209, 209, 209);
    }
    .wrap {
            width: 1530px;
            height: 575px;
            position: relative;
        }
        .list {
            width: 100%;
            height: 100%;
            position: relative;
            padding-left: 0px;
            position: relative;
        }
      
        .item {
            width: 1530px;
            height: 575px;
            list-style: none;
            position: absolute;
            left: 0;
            opacity: 0;
            transition: all .8s; 
        }
        .item img{
            width: 100%;
            height: 100%;
        }
      
        .item:nth-child(1) {
            background-color: skyblue;
        }
        .item:nth-child(2) {
            background-color: yellowgreen;
        }
        .item:nth-child(3) {
            background-color: rebeccapurple;
        }
        .item:nth-child(4) {
            background-color: pink;
        }
        .item:nth-child(5) {
            background-color: orange;
        }
        .item.active {
            z-index: 10;
            opacity: 1;
        }
        .btn {
            width: 60px;
            height: 100px;
            z-index: 100;
            top: 150px;
            position: absolute;
            position: relative;
        }
        #leftBtn {
            left: 0px;
            background-color: transparent;
            border: 1px solid white;
            position: absolute;
            top: 300px;
            left: 350px;
            color: white;
        }
        #rightBtn {
            right: 0px;
            background-color: transparent;
            border: 1px solid white;
            position: absolute;
            top: 300px;
            right: 1px;
            color: white;
        }
        .pointList {
            list-style: none;
            padding-left: 0px;
            position: absolute;
            right: 20px;
            bottom: 20px;
            z-index: 200;
        }
        .point {
            width: 10px;
            height: 10px;
            background-color: antiquewhite;
            border-radius: 100%;
            float: left;
            margin-right: 8px;
            border-style: solid;
            border-width: 2px;
            border-color: slategray;
            cursor: pointer;  
        }
        .point.active{
            background-color: cadetblue;
        }
        .box234{
            position: relative;
        }
        .li{
        width: 290px;
        height: 575px;
        background-color: rgba(0, 0, 0,.5);
        position: absolute;
        top: -540px;
        left: -1420px;
        
        
        
    }
    .li ul{
        padding-top: 45px;
    }
    .li li{
        width: 290px;
        height: 53px;
        box-sizing: border-box;
        background-color: transparent;
        color: white;
        list-style: none;
        font-size: 18px;
        padding-left: 40px;
        position: relative;
        /* text-align: center; */
        line-height:53px ;
    }
    .li li span{
        position: absolute;
        right: 15px;
    }
    .li li:hover{
        background-color: rgb(255, 103, 0);
    }
</style>
